<template>
<van-list
	  v-model:loading="loading"
	  :finished="finished"
	  finished-text="没有更多了"
	  :immediate-check="false"
	  offset="100"
	  @load="onLoad">
	<div class="companion-view" v-for="(item,index) in managingData" :key="index">
		<div class="companion-name global-display global-a-items">
			<img :src="item.author_data[0].avatarUrl" class="fadeIn">
			<div>
				<p>{{item.author_data[0].nickname}}</p>
				<p>{{item.timestamp}}报名</p>
			</div>
		</div>
		<div class="companion-time global-display global-a-items managing-user">
			<p>联系方式：&nbsp;{{item.contact_inform}}</p>
		</div>
		<div class="companion-time global-display global-a-items managing-user">
			<p>性别：&nbsp;{{item.gender === 1 ? '男' : '女'}}</p>
		</div>
		<div class="companion-time global-display global-a-items managing-user">
			<p>介绍：&nbsp;{{item.introduce}}</p>
		</div>
	</div>
	<!-- 如果没有数据 -->
	<van-empty
		v-if="exist"
		image="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/icon/kong-zhuang-tai.png"
		image-size="80"
		description="还没有报名用户"
	/>
</van-list>
<div style="height: 200px;"></div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router'
const $routeQuery = useRoute()  // 用于接收路由参数的
import request from '@/api/request.js'

// 存储接收到的数据
const managingData = ref([])
const exist = ref(false)
const managingId = ref('')
onMounted(async()=>{ 
	const _id = $routeQuery.query._id
	managingId.value = _id
	const res = await request.get('/managing_member',{id:_id,page:1});
	console.log(res);
	managingData.value = res.data
	exist.value = res.data.length > 0 ? false : true
})
// 上啦加载
const loading = ref(false);
const finished = ref(false);
const page = ref(1)
async function onLoad(){
	page.value++
	const res = await request.get('/managing_member',{id:managingId.value,page:page.value});
	managingData.value = [...managingData.value,...res.data]
	loading.value = false
	if(res.data.length === 0){
		finished.value = true
	}
}
</script>

<style>
@import url('@/style/index.css');
.managing-user{
	padding-top: 8px !important;
	padding-bottom: 0 !important;
}
</style>